<template>
  <div :class="`${xvueNameSpace}`">
    <div
      v-loading="isLoading"
      class="config-panel"
    >
      <div
        class="container"
        :class="xvueTheme"
      >
        <el-tabs v-model="activeName">
          <el-tab-pane
            :label="$demoi18n('panel.tab.baseInfo')"
            name="zero"
          >
            <HelpManual link="multi-params" />
            <!-- xvue注册的组件 -->
            <xvp-base-info
              ref="xVueBaseInfo"
              :is-hide-share-parameter="true"
              :widget-instance-id="widgetInstanceId"
              :is-exist-config="true"
              :is-hide-save-button="true"
            />
          </el-tab-pane>
          <el-tab-pane
            :label="propertyLabel"
            name="first"
          >
            <panel-property
              ref="panel_property"
              :config="configClone"
              :widget-instance-id="widgetInstanceId"
              :widget="widget"
            />
          </el-tab-pane>
          <el-tab-pane
            :label="$demoi18n('panel.tab.linkage')"
            name="third"
          >
            <panel-linkage
              ref="panel_linkage"
              :config="configClone"
              :widget-instance-id="widgetInstanceId"
              :can-add-event="false"
            />
          </el-tab-pane>
          <div class="save_box">
            <el-button
              type="primary"
              class="saveBtn"
              @click.stop="saveAllData()"
            >{{
              $demoi18n('panel.button.apply')
            }}</el-button>
          </div>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script>
import PanelProperty from './panel-property';
import configPanelBase from '@/mixin/config-panel-base.js';
import PanelLinkage from '@/components/panel-linkage-new/panel-linkage';
import HelpManual from '@/components/common/help-manual/help-manual.vue';
import { visualAction } from '@/utils/util';

import config from './config.js';
export default {
  components: {
    PanelProperty,
    PanelLinkage,
    HelpManual,
  },
  mixins: [configPanelBase],
  props: ['config', 'orgConfig', 'widgetInstanceId', 'widget'],
  data() {
    return {
      isLoading: false,
      activeName: 'first',
    };
  },
  computed: {
    configClone() {
      // 克隆一个config，用于在子组件中直接改变内部属性
      if (this.config) {
        return JSON.parse(JSON.stringify(this.config));
      }
      if (window.isLocalEnv) {
        const _config = JSON.parse(JSON.stringify(config));
        return _config;
      }
      return {};
    },
  },
  methods: {
  },
};
</script>
<style lang="less" scoped>
// 配置面板通用样式，主要有明亮风格和蓝黑，样式名需一致
@import '../../common/less/config-panel.less';
</style>
<style lang="less" scoped>
.config-panel {
  height: 100%;
  .container {
    height: 100%;
    :deep(.el-tabs) {
      height: 100%;
      .el-tabs__nav {
      }
      .el-tabs__content {
        height: 100%;
        overflow: auto;
      }
    }
  }
}
</style>
